var img_order_num = $("ul.imgList>li").length,
    pic_point = 1;



function moveright() {
    if (pic_point + 2 < img_order_num) {
        $('#src_img_' + pic_point).css('display', 'none');
        $('#src_img_' + (pic_point + 3)).css('display', 'block');
        pic_point++;
    }
    if (pic_point + 2 < img_order_num)
        $('#Image7').attr('src', 'img/bt_rr.gif');
    else
        $('#Image7').attr('src', 'img/bt_r.gif');
    if (pic_point > 1)
        $('#Image8').attr('src', 'img/bt_lr.gif');
    else
        $('#Image8').attr('src', 'img/bt_l.gif');
}

function moveleft() {
    if (pic_point > 1) {
        $('#src_img_' + (pic_point - 1)).css('display', 'block');
        $('#src_img_' + (pic_point + 2)).css('display', 'none');
        pic_point--;
    }
    if (pic_point + 2 < img_order_num)
        $('#Image7').attr('src', 'img/bt_rr.gif');
    else
        $('#Image7').attr('src', 'img/bt_r.gif');
    if (pic_point > 1)
        $('#Image8').attr('src', 'img/bt_lr.gif');
    else
        $('#Image8').attr('src', 'img/bt_l.gif');
}

$(document).ready(function() {

    for (i = 1; i < 4; i++) $('#src_img_' + i).css('display', 'block');
    if (img_order_num > 1) {

        if (pic_point + 2 < img_order_num)
            $('#Image7').attr('src', 'img/bt_rr.gif');
        else
            $('#Image7').attr('src', 'img/bt_r.gif');
        if (pic_point > 1)
            $('#Image8').attr('src', 'img/bt_lr.gif');
        else
            $('#Image8').attr('src', 'img/bt_l.gif');
    }

    $(function() {
        var sWidth = 490; //$("#focusPrj").width(); //获取焦点图的宽度（显示面积）
        var len = $("#focusPrj ul li").length; //获取焦点图个数
        var index = 0;
        var picTimer;
        //以下代码添加数字按钮和按钮后的半透明条，还有上一页、下一页两个按钮
        var btn = "";
        for (var i = 0; i < len; i++) {
            btn += "<span></span>";
        }
        if (img_order_num > 1) {
            btn += "<div class='preNext pre'></div><div class='preNext next'></div>";
            $("#focusPrj").append(btn);
            $("#focusPrj .btnBg").css("opacity", 0.5);
            //为小按钮添加鼠标滑入事件，以显示相应的内容
            $("#focusPrj .btn span").css("opacity", 0.4).mouseenter(function() {
                index = $("#focusPrj .btn span").index(this);
                showPics(index);
            }).eq(0).trigger("mouseenter");
            //上一页、下一页按钮透明度处理
            $("#focusPrj .preNext").css("opacity", 0.2).hover(function() {
                $(this).stop(true, false).animate({
                    "opacity": "0.5"
                }, 300);
            }, function() {
                $(this).stop(true, false).animate({
                    "opacity": "0.2"
                }, 300);
            });
            //上一页按钮
            $("#focusPrj .pre").click(function() {
                index -= 1;
                if (index == -1) {
                    index = len - 1;
                }
                showPics(index);
            });
            //下一页按钮
            $("#focusPrj .next").click(function() {
                index += 1;
                if (index == len) {
                    index = 0;
                }
                showPics(index);
            });
            //本例为左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度
            $("#focusPrj ul").css("width", sWidth * (len));
            //显示图片函数，根据接收的index值显示相应的内容

            function showPics(index) { //普通切换
                //                                    debugger;
                var nowLeft = -index * sWidth; //根据index值计算ul元素的left值
                $("#focusPrj ul").stop(true, false).animate({
                    "left": nowLeft
                }, 300); //通过animate()调整ul元素滚动到计算出的position
                //$("#focusPrj .btn span").removeClass("on").eq(index).addClass("on"); //为当前的按钮切换到选中的效果
                $("#focusPrj .btn span").stop(true, false).animate({
                    "opacity": "0.4"
                }, 300).eq(index).stop(true, false).animate({
                    "opacity": "1"
                }, 300); //为当前的按钮切换到选中的效果
            }
        }

        var indexOfMenu = 1;
        while (indexOfMenu <= len) {
            //                    debugger;
            $("#img_" + indexOfMenu).click(function() {
                var idIndex = $(this).attr("id").replace("img_", "")
                index = idIndex - 1;
                showPics(index);
            });
            indexOfMenu++;
        }
    });
})
